import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Header from "./components/Header/Header";
import Main from "./components/Main/Main";
import Container from "./components/Container/Container";

function App() {
  return (
    <Router>
      <Container>
        <Header />
        <Routes>
          <Route path="/" element={<Main />} />
          <Route path="/items" element={<Main />} />
          {/* 다른 라우트들도 추가 */}
        </Routes>
      </Container>
    </Router>
  );
}

export default App;

import { NavLink } from 'react-router-dom';
import pandaMarket from "../../images/PandaMarket.png";
import UserLogo from "../../images/UserLogo.svg";
import "./Header.css";

const Header = () => {
  return (
    <div className="Header">
      <NavLink to="/items">
        <img
          className="Header__logo"
          src={pandaMarket}
          alt="판마다켓 홈페이지 로고"
        />
      </NavLink>
      <div className="Header__menu">
        <NavLink
          className={({ isActive }) => 
            `Header__menu__items ${isActive ? "active" : ""}`
          }
          to="/board"
        >
          자유게시판
        </NavLink>
        <NavLink
          className={({ isActive }) => 
            `Header__menu__items ${isActive ? "active" : ""}`
          }
          to="/items"
        >
          중고마켓
        </NavLink>
      </div>
      <NavLink to="/items">
        <img className="Header__user" src={UserLogo} alt="유저 아이콘" />
      </NavLink>
    </div>
  );
};

export default Header;

import { useState, useEffect } from 'react';

const usePagination = (pageSize = 10, maxVisible = 5) => {
  const [currentPage, setCurrentPage] = useState(1);
  const [totalPages, setTotalPages] = useState(1);

  useEffect(() => {
    const fetchTotalPages = async () => {
      try {
        const res = await fetch(
          `https://panda-market-api.vercel.app/products?page=1&pageSize=${pageSize}&orderBy=recent`
        );
        const data = await res.json();
        const count = data.totalCount || 1;
        setTotalPages(Math.ceil(count / pageSize));
      } catch (err) {
        console.error("페이지 수 불러오기 실패:", err);
      }
    };

    fetchTotalPages();
  }, [pageSize]);

  const currentGroup = Math.floor((currentPage - 1) / maxVisible);
  const maxGroup = Math.floor((totalPages - 1) / maxVisible);
  const startPage = currentGroup * maxVisible + 1;
  const endPage = Math.min(startPage + maxVisible - 1, totalPages);

  const handlePageChange = (page) => {
    if (page >= 1 && page <= totalPages) {
      setCurrentPage(page);
    }
  };

  const handlePrevGroup = () => {
    const prevStart = (currentGroup - 1) * maxVisible + 1;
    if (currentGroup > 0) setCurrentPage(prevStart);
  };

  const handleNextGroup = () => {
    const nextStart = (currentGroup + 1) * maxVisible + 1;
    if (currentGroup < maxGroup) setCurrentPage(nextStart);
  };

  const pages = Array.from(
    { length: endPage - startPage + 1 },
    (_, i) => startPage + i
  );

  return {
    currentPage,
    totalPages,
    pages,
    handlePageChange,
    handlePrevGroup,
    handleNextGroup,
    isFirstGroup: currentGroup === 0,
    isLastGroup: currentGroup === maxGroup,
  };
};

export default usePagination;

import usePagination from "../../hooks/usePagination";
import Footer from "../Footer/Footer";
import AllProducts from "./Products/AllProducts";
import BestProducts from "./Products/BestProducts";

const Main = () => {
  const {
    currentPage,
    totalPages,
    pages,
    handlePageChange,
    handlePrevGroup,
    handleNextGroup,
    isFirstGroup,
    isLastGroup,
  } = usePagination();

  return (
    <>
      <BestProducts />
      <AllProducts currentPage={currentPage} />
      <Footer
        currentPage={currentPage}
        totalPages={totalPages}
        pages={pages}
        onPageChange={handlePageChange}
        onPrevGroup={handlePrevGroup}
        onNextGroup={handleNextGroup}
        isFirstGroup={isFirstGroup}
        isLastGroup={isLastGroup}
      />
    </>
  );
};

export default Main;

import "./Footer.css";

const PaginationButton = ({ onClick, disabled, children, className = "" }) => (
  <button
    className={`footer__btn ${className}`}
    onClick={onClick}
    disabled={disabled}
  >
    {children}
  </button>
);

const Footer = ({
  currentPage,
  totalPages,
  pages,
  onPageChange,
  onPrevGroup,
  onNextGroup,
  isFirstGroup,
  isLastGroup,
}) => {
  return (
    <div className="footer">
      <PaginationButton onClick={onPrevGroup} disabled={isFirstGroup}>
        &lt;
      </PaginationButton>

      {pages.map((page) => (
        <PaginationButton
          key={page}
          onClick={() => onPageChange(page)}
          className={page === currentPage ? "active" : ""}
        >
          {page}
        </PaginationButton>
      ))}

      <PaginationButton onClick={onNextGroup} disabled={isLastGroup}>
        &gt;
      </PaginationButton>
    </div>
  );
};

export default Footer;